<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // 上下文调用方式，有3中，call、apply、bind
        
        // bind 用法

        // var obj = {
        //     age: 18,
        //     run: function() {
        //         setTimeout(function() {
        //             console.log(this.age) // ? undefined
        //         }, 100);
        //     }
        // }

        // 改造方式1：bind
        var obj = {
            age: 18,
            run: function() {
                setTimeout((function(){
                    console.log(this.age) // ? 18
                }).bind(this), 100);
            }
        }
        // 通过bind方法本身匿名函数并没有执行，只是改变了改函数内部的this的值，指向obj
        obj.run();

        // 改造方式2：箭头函数
        var obj2 = {
            age: 18,
            run: function() {
                setTimeout(() => {
                    console.log(this.age) // ? 18
                }, 100);
            }
        }
        obj2.run();



        // bind 基本用法
        function speed() {
            console.log(this.seconds)
        }

        // 执行了bind方法之后，返回了一个新函数，新函数的逻辑跟原来一样，唯一的不同就是this指向问题
        // this指向了 {seconds: 200}
        var speedBind = speed.bind({seconds: 200});
        speedBind(); // 200

        (function eat() {
            console.log(this.seconds); // ? 200
        }).bind({seconds: 200})();

        var o = {
            name: "西瓜",
            drink: (function() {
                console.log(this.name)
            }).bind({name: '黄瓜'})
        }

        o.drink(); // 黄瓜  因为通过bind方法改变了this的指向
    </script>
</body>
</html>